<script setup lang="ts">
  import { computed, ref } from 'vue'
  import Header from './Header.vue'
  import Table from './Table.vue'
  import Pagination from '@/components/Pagination/index.vue'

  const props = defineProps({
    moduleId: {
      type: String,
      required: true,
    },
  })

  const tableInstance = ref<InstanceType<typeof Table> | null>(null)
  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)
  const total = computed(() => {
    if (tableInstance.value) {
      return tableInstance.value.total
    }

    return 0
  })
  const selectedConnectFieldIds = ref<Array<string>>([])

  const handleSelectConnectField = (connectFieldIds: Array<string>) => {
    selectedConnectFieldIds.value = connectFieldIds
  }

  const getList = () => {
    if (paginationInstance.value && tableInstance.value) {
      tableInstance.value.getList({
        limit: paginationInstance.value.size,
        page: paginationInstance.value.current,
      })
    }
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div class="return-factory-module-detail-custom-field-connect">
    <Header
      :module-id="props.moduleId"
      :selected-field-ids="selectedConnectFieldIds"
      @update="getList"
    ></Header>
    <div class="table">
      <Table
        ref="tableInstance"
        :module-id="props.moduleId"
        @select-connect-field="handleSelectConnectField"
      ></Table>
    </div>
    <div class="pagination">
      <Pagination ref="paginationInstance" :list_total="total"></Pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .return-factory-module-detail-custom-field-connect {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 5px;

    .table {
      max-height: calc(100% - 66px);
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
